<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</meta>
    <title>登录界面</title>
<!--    
    <style>
         table {
            border-collapse: collapse;
            width: 50%;
            margin: 0 auto;
        }
        td {
            border: none;
            padding: 5px; /* 减少 padding 以缩小间距 */
            text-align: center; /* 将文本右对齐，使其更靠近输入框 */
        } 
        input[type="text"], input[type="password"] {
            width: 50%; /* 确保输入框宽度一致 */
            box-sizing: border-box; /* 包括内边距和边框在内的宽度计算 */
        }
        .other-login-links a {
            margin: 0 10px;
        }
        .register-link {
            margin-top: 5px;
        } */
    </style>
-->
</head>
<body>
<!--
form标签属性
1.action:提交地址
2.method:提交方式
   2.1 GET方式
   请求参数会显示在浏览器地址栏中
   不适合提交密码等敏感信息 不适合提交数据量大的情况
   2.2 POST方式
   请求参数不会显示在浏览器地址栏中
   适合提交密码等敏感信息
   适合提交数据量大的情况
3.target:提交后打开页面
4.name:表单名称
5.enctype:编码类型
6.accept-charset:提交编码
7.autocomplete:自动完成
8.novalidate:不验证
9.autofocus:自动聚焦
10.novalidate:不验证
11.required:必填    
-->
<form action="#" method="post">
    <table align="center">
        <caption>会员登录</caption>
<!--
caption标签属性:
1.align:设置标题对齐方式
2.valign:设置标题垂直对齐方式
-->            
        <tr>
            <td align="right">登录账号:</td>
            <td><input type="text" placeholder="邮箱/id/手机号" name="username" class="name" required></td>
        </tr>
        <tr>
            <td align="right">密码:</td>
            <td><input type="password" placeholder="密码" name="password" class="password" required></td>
        </tr>
        <tr>
            <td colspan="2" class="checkbox-container" align="center">
                <label>
                    <input type="checkbox" name="remember" value="yes">
                    两周内自动登录
                </label>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="登录">
                <a href="https://bdfy.azurewebsites.net/?%E6%80%8E%E4%B9%88%E6%89%BE%E5%9B%9E%E5%AF%86%E7%A0%81">找回密码</a>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center" class="other-login-links">
                其他账号登录
                <a href="#">QQ账号</a>
                <a href="#">新浪微博</a>
                <a href="#">百度账号</a>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="register-link" align="center">
                还不是会员？<a href="#">立即注册</a>
            </td>
        </tr>
    </table>
    <!--
    input标签属性
    1.type:输入类型
       1.1 text:文本框
    2.placeholder:提示文本
    3.class:设置样式
    4.name:设置提交时的参数名
    5.value:设置默认值
   
    -->
</form>
</body>
</html>